import { Card } from 'antd';
import { useEffect } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';

let map: any;
const Index = () => {
  useEffect(() => {
    AMapLoader.load({
      key: '613b24d21ae4ee175d6495a5dbc16710', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        map = new AMap.Map('container', {
          // zoom: 17, //级别 0-20
          center: [120.26408, 30.305451], //中心点坐标 [经纬度]
          // viewMode: '3D', //使用3D视图
          mapStyle: 'amap://styles/blue', //设置地图的显示样式
        });
        //实时路况图层
        // var trafficLayer = new AMap.TileLayer.Satellite({
        //   zIndex: 10,
        // });
        // map.add(trafficLayer); //添加图层到地图

        var marker = new AMap.Marker({
          position: [120.26408, 30.305451], //位置
          title: '旺田商务楼',
          icon: 'https://vdata.amap.com/icons/b18/1/2.png',
          offset: new AMap.Pixel(-10, -10),
        });
        map.add(marker); //添加到地图

        // var lineArr = [
        //   [120.26408, 30.305451],
        //   [120.264236, 30.305773],
        //   [120.266338, 30.306041],
        //   [120.266397, 30.307834],
        //   [120.262648, 30.307848],
        // ];
        // var polyline = new AMap.Polyline({
        //   path: lineArr, //设置线覆盖物路径
        //   strokeColor: '#3366FF', //线颜色
        //   strokeWeight: 5, //线宽
        //   strokeStyle: 'solid', //线样式
        // });
        // map.add(polyline);
        // var path = [
        //   [120.26408, 30.305451],
        //   [120.264236, 30.305773],
        //   [120.266338, 30.306041],
        //   [120.266397, 30.307834],
        //   [120.262648, 30.307848],
        // ];

        // var polygon = new AMap.Polygon({
        //   path: path,
        //   fillColor: '#fff', // 多边形填充颜色
        //   borderWeight: 2, // 线条宽度，默认为 1
        //   strokeColor: 'red', // 线条颜色
        // });

        // map.add(polygon);
        var circle = new AMap.Circle({
          center: [120.26408, 30.305451], // 圆心位置
          radius: 1000, // 圆半径
          fillColor: 'red', // 圆形填充颜色
          strokeColor: '#fff', // 描边颜色
          strokeWeight: 2, // 描边宽度
        });

        map.add(circle);

        // marker.on('click', (e: any) => {
        //   console.log(e);
        // });
        // map.on('click', (e: any) => {
        //   var marker = new AMap.Marker({
        //     position: [e.lnglat.lng, e.lnglat.lat], //位置
        //   });
        //   map.add(marker); //添加到地图
        // });

        AMap.plugin('AMap.ToolBar', function () {
          //异步加载插件
          var toolbar = new AMap.ToolBar();
          map.addControl(toolbar);
        });
        AMap.plugin('AMap.Scale', function () {
          //异步加载插件
          var scale = new AMap.Scale();
          map.addControl(scale);
        });
        AMap.plugin('AMap.Geolocation', function () {
          //异步加载插件
          var geolocation = new AMap.Geolocation();
          map.addControl(geolocation);
        });

        map.on('complete', function () {
          // 地图图块加载完成后触发
          console.log('地图加在完成了');
          map.setFitView();
        });
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      map.destroy();
      console.log('地图销毁了');
    };
  }, []);

  return (
    <Card title="地图">
      <div id="container" style={{ height: 400 }}></div>
    </Card>
  );
};

Index.wrappers = ['@/wrappers/authmap'];

export default Index;
